<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>房博会楼市大通关</title>
    <script type="text/javascript" src="js/zepto_1.1.3.js"></script>
    <style type="text/css">
    	*{margin:0;padding:0;border:0;}
    	.main{max-width:750px;margin:auto;}
    	.main-wrap{position:relative;}
    	.main-wrap img{display:block;width:100%;}
    	.main-wrap a{display:block;width:100%;}
    	.main-btn{position:absolute;top:0;width:40%;left:30%;}
    	.main-spac{height:10px;}
    	
    	#mask-win,#mask-win2{position:fixed;z-index:100;display:none;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);}
		.mask-box{position:absolute;left:5%;top:5%;z-index:100;width:90%;height:90%;border-radius:12px;background-color:#c76601;}    
		.mask-box-head{position:absolute;z-index:110;top:-30px;left:15%;width: 70%;}
		.mask-box-con{position:absolute;top:15px;left:15px;bottom:15px;right:15px;box-shadow:0 0 20px #333;background-color:#fff;border-radius: 12px;;}
		.mask-box-con img{display:block;margin:15px 10%;width:80%;}
		.mask-box-con h2{text-align: center;margin-top:30px;color:#4d4d4d;line-height: 2em;}
		.mask-box-con p{margin:40px 5% 0;width:90%;border-bottom:3px #4D4D4D dashed;font-size:18px;height:50%;overflow:scroll;text-indent:2em;line-height:1.5em;color:#4d4d4d;}
		.mask-box-close{position:absolute;top:-10px;right:-10px;z-index: 110;width:35px;height:35px;}
		.mask-box-con .mask-box-wrong{position:absolute;width:30px;right:0;top:0;}
		.mask-box-btom{position:absolute;bottom:-15px;}
		
		.mask-box-2d{height:40%;margin-top:15px;}
		.mask-box-2d div{width:40%;}
		.mask-box-2dl{float:left;margin-left:5%;}
		.mask-box-2dr{float:right;margin-right:5%;}
		.mask-box-2d img{display:block;width:100%;margin:auto;}
		.mask-box-2d h4{text-align: center;line-height:2.6em;font-weight:bold;color:#4d4d4d;}
		.indexwin{margin-top:70px!important;}
    </style>
</head>
<body>
	<div class="main">
		<div class="main-wrap">
			<img src="img/indexbg1.jpg"/>
		</div>
		<div class="main-wrap">
			<img src="img/indexbg2.jpg"/>
			<div class="main-btn">
			<a href="./game.html"><img src="img/indexbtn1.png"/></a>
			<div class="main-spac"></div>
			<a href="javascript:void(0)" id="showGZ"><img src="img/indexbtn2.png"/></a>
			<div class="main-spac"></div>
			<a href="javascript:void(0)" id="showJP"><img src="img/indexbtn3.png"/></a>
			</div>
		</div>
		<div id="mask-win">
			<div class="mask-box">
				<img class="mask-box-head" src="images/win (7).png"/>
				<img class="mask-box-close" src="images/win (3).png"/>
				<div class="mask-box-con">
					<p>
						玩家只需要在楼市大通关互动游戏中填写正确通关密码，通关后可参加抽奖，在中奖页面填写个人联系信息，凭借系统下发的兑奖码，即可到2017广西（南宁）房地产博览会现场兑奖点领取奖品。
　　<br/>通关密码线索和最终幸运大奖得主，都将在南国早报官方微信平台和南国楼市微信平台公布。<br/>
赶紧扫描下方二维码，赢大奖吧！
					</p>
					<div class="mask-box-2d">
						<div class="mask-box-2dl">
							<img class="mask-box-2dl-img" src="img/2dcode2.jpg"/>
							<h4>南国早报</h4>
						</div>
						<div class="mask-box-2dr">
							<img class="mask-box-2dr-img" src="img/2dcode1.jpg"/>
							<h4>南国楼市</h4>
						</div>
						<script type="text/javascript">
							$('.mask-box-2dr-img').on('touchstart',function(){
								$(".mask-box-2dl-img").attr('src','img/2dcode1.jpg');
							});
							$('.mask-box-2dr-img').on('touchend',function(){
								$(".mask-box-2dl-img").attr('src','img/2dcode2.jpg');
								setTimeout(function(){
									$(".mask-box-2dl-img").attr('src','img/2dcode2.jpg');
								},1000);
							});
						</script>
					</div>
					<img class="mask-box-btom" src="images/btom.jpg"/>
				</div>
			</div>
		</div>
		
		<div id="mask-win2">
			<div class="mask-box">
				<img class="mask-box-head" src="images/win (8).png"/>
				<img class="mask-box-close" src="images/win (3).png"/>
				<div class="mask-box-con">
					<img src="img/indexwin.png" class="indexwin"/>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		var mask = $('#mask-win');
		var mask2 = $('#mask-win2');
		var gz = $('#showGZ');
		var jp = $('#showJP');
		$('.mask-box-close').on('click',function(){
			hideMask();
			hideMask2();
		});
		$('#showGZ').on('click',function(){
			showMask();
		});
		$('#showJP').on('click',function(){
			showMask2();
		});
		function showMask(index){
			mask.show();
		}
		function hideMask(index){
			mask.hide();
		}
		function showMask2(index){
			mask2.show();
		}
		function hideMask2(index){
			mask2.hide();
		}
	</script>
</body>
</html>